<template>
	<view class="">

		<view class="body">
			<view class="top-container">
				<uni-list :border="false">
					<!-- <uni-list-item :border="false" title="执行者" :rightText="userInfo.name" /> -->
					<uni-list-item :border="false" title="收料通知单号" :rightText="header.billNo" />
					<uni-list-item :border="false" title="供应商" :rightText="header.supplierName" />
					<uni-list-item :border="false" title="采购部门" :rightText="header.purDept" />
					<uni-list-item :border="false" title="采购员" :rightText="header.purChaser" />
					<uni-list-item :border="false" title="日期">
						<template v-slot:footer>
							<uni-dateformat :date="header.date" format="yyyy年MM月dd日" style="font-size: 20px; color: #000000;">
							</uni-dateformat>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
			<view class="header-remark">
				<textarea class="input-text" v-model="header.remark" placeholder="备注信息...." placeholder-style="font-size:22px;"></textarea>
			</view>
			<template v-if="detail && detail.length > 0">
				<view class="allCheck">
					<checkbox :checked="checkAll" @click="all_change"></checkbox>
					<span>全选</span>
				</view>
				<checkbox-group @change="checkboxChange">
					<view class="" v-for="(item,index) in detail" :key="index">
						<view class="panel">

							<view>
								<checkbox :value="item.materialNumber" :checked="item.checked" />
							</view>
							<view class="panel_content">
								<view class="panel_content_row">
									<view class="panel_content_row_item">
										<view class="panel_content_row_item_title">物料编码：</view>
										<view class="panel_content_row_item_value">{{ item.materialNumber }}</view>
									</view>
								</view>
							</view>
							<view class="panel_content">
								<view class="panel_content_row">
									<view class="panel_content_row_item">
										<view class="panel_content_row_item_title">名称：</view>
										<view class="panel_content_row_item_value">{{ item.materialName }}</view>
									</view>
								</view>
							</view>
							<view class="panel_content">
								<view class="panel_content_row">
									<view class="panel_content_row_item">
										<view class="panel_content_row_item_title">规格：</view>
										<view class="panel_content_row_item_value">{{ item.specification }}</view>
									</view>
								</view>
							</view>
							<view class="panel_content">
								<view class="panel_content_row">
									<!-- 暂时没有材质，用单位代替 -->
									<view class="panel_content_row_item">
										<view class="panel_content_row_item_title">单位：</view>
										<view class="panel_content_row_item_value">{{ item.unitName }}</view>
									</view>
								</view>
							</view>



							<view class="panel_content">
								<view class="panel_content_row">
									<view class="panel_content_row_item">
										<view class="panel_content_row_item_title">下推数量：</view>
										<view class="panel_content_row_item_value">{{ item.inspectCount }}</view>
									</view>
									<view class="panel_content_row_item">
										<view class="panel_content_row_item_title">是否下推：</view>
										<view class="panel_content_row_item_value">
											<uni-tag :text="item.isChecked === true ? '是' : '否'" :type="item.isChecked === true ? 'success' : 'primary'"></uni-tag>
										</view>
									</view>
								</view>
							</view>
							<view class="panel_content">
								<view class="panel_content_row">
									<view class="panel_content_row_item">
										<view class="panel_content_row_item_title">交货数量：</view>
										<view class="panel_content_row_item_value">{{ item.deliveQty }}</view>
									</view>
								</view>
							</view>
							<view class="panel_content">
								<view class="panel_content_row">
									<view class="panel_content_row_item">
										<view class="panel_content_row_item_title">批号：</view>
										<view class="panel_content_row_item_value_input">
											<view class="panel_content_row_item_value_input">
												<input v-model="item.lot " placeholder="请输入批号" placeholder-class="input_placeholder" :disabled="!item.isBatch"
												 style="width: 100px;" />
											</view>
										</view>
										<!-- <view class="panel_content_row_item_value">{{ item.lot }}</view> -->
									</view>
								</view>
							</view>

							<view class="panel_content">
								<view class="panel_content_row">
									<view class="panel_content_row_item">
										<view class="panel_content_row_item_title">实收数量：</view>
										<view class="panel_content_row_item_value_input">
											<view class="panel_content_row_item_value_input">
												<input v-model="item.weightResultQty " placeholder="请输入实收数量" placeholder-class="input_placeholder" @input="handleQuality(item)" />
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>

					</view>

				</checkbox-group>


			</template>
			<view class="panel">
				<!--  底部按钮  -->
				<view class="footerPanelgx">
					<view class="footerPanelgx_body">
						<button @click="saveInspect" class="footerBtngx save" :disabled="butClick"><i class="iconfont icon-duihao btn_icon"></i>生成来料检验单
						</button>

					</view>
				</view>
			</view>
		</view>
		<!--  底部按钮  -->
		<!-- 		<view class="footerPanel">
			<view class="footerPanel_body">
				<button @click="saveInspect" class="footerBtn save" :disabled="butClick"><i class="iconfont icon-duihao btn_icon"></i>生成来料检验单
				</button>

			</view>
		</view> -->
	</view>
</template>

<script>
	import uniTransition from 'uni_modules/uni-transition/components/uni-transition/uni-transition.vue';

	import {
		getReceiveDetail,
		saveInspect,

	} from '@/utils/api.js'

	export default {
		components: {

		},
		data() {
			return {
				billNo: '',
				loading: true,
				header: {},
				detail: [],
				isIndeterminate: true,
				butClick: false,
				checkAll: false
			}
		},
		methods: {
			//全选
			all_change() {
				this.checkAll = !this.checkAll;
				var items = this.detail
				if (this.checkAll) {
					for (var i = 0, lenI = items.length; i < lenI; ++i) {
						const item = items[i]
						this.$set(item, 'checked', true)
					}
				} else {
					for (var i = 0, lenI = items.length; i < lenI; ++i) {
						const item = items[i]
						this.$set(item, 'checked', false)
					}
				}
			},
			//填写实收数量
			handleQuality(e) {
				const v = e.weightResultQty
				const zero = /^(0{2,})|[^0-9]/g
				let final = 0
				if (!v) {
					final = 0
				} else {
					final = v.toString().replace(zero, (v) => {
						return 0
					})

					if (final.split('')[0] * 1 === 0) {
						final = final.slice(1) - 0 || 0
					}
				}
				this.$nextTick(() => {
					e.weightResultQty = final.toString() || '0'
				})



			},
			checkboxChange: function(e) {
				var items = this.detail,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.materialNumber)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}

			},
			//数量校验
			checkCount(arr) {
				//数量是否都大于0
				let res = arr.every(function(iterm) {
					return iterm.weightResultQty > 0
				})
				//收货数量是否大于剩余领料数量
				let resQty = arr.every(function(iterm) {
					return iterm.weightResultQty <= (iterm.deliveQty - iterm.inspectCount)
				})
				return res && resQty;
			},
			//生成来料检验单
			saveInspect() {
				//校验有没有勾选,勾选状态为undefined也是未勾选
				let check = this.detail.every(function(i) {
					return i.checked == false || i.checked === undefined;
				})

				if (check) {
					uni.showToast({
						title: '请勾选物料信息'
					})
					return
				}
				//将勾选的数据循环到一个新的数组中返回给后端
				let arr = this.detail.filter(function(i) {
					return i.checked == true
				})
				//判断实收数量不能为0，并且时候数量不能大于剩余未交货数量
				let countRes = this.checkCount(arr)

				if (!countRes) {
					uni.showToast({
						title: '收货数量必须大于0，并且不能大于交货数量'
					})
					return
				}
				let self = this;
				uni.showModal({
					title: '提示',
					content: '确认生成',
					success(res) {
						if (res.confirm) {
							try {
								saveInspect({
									billNo: self.billNo,
									detail: arr,
									remark: self.header.remark
								}).then(result => {
									if (result.data.status !== 200) {
										return
									}
									uni.showToast({
										title: '创建成功',
										icon: 'none'
									})
									setTimeout(() => {
										uni.navigateBack({
											delta: 1,
											success() {
												uni.$emit('update', {
													msg: '页面刷新'
												});
											}
										})
									}, 1000)
								})
							} catch (e) {
								console.log(e)
							}
						}
					}
				})


			},
			// 获取详情数据
			initData() {
				getReceiveDetail({
					billNo: this.billNo
				}).then(res => {
					if (res.statusCode == 200) {
						this.header = res.data.data.data
						this.detail = res.data.data.dataList
					}
				})

			}


		},
		watch: {
			userInfo() {
				console.log(this.userInfo())
			}
		},
		onLoad(e) {
			this.billNo = e.billNo
			// 获取详情数据
			this.initData()

		}
	}
</script>

<style lang="scss" scoped>
	@import "../../static/css/common";

	/* 调整列表项左右文字大小 */
	::v-deep .uni-list-item__content-title {
		font-size: 20px !important;
		/* 左侧标题字体大小 */
		padding-left: 5px;
	}

	::v-deep .uni-list-item__extra-text {
		font-size: 20px !important;
		/* 右侧内容字体大小 */
		padding-right: 5px;
		color: #333;
	}

	/* 调整行间距 */
	::v-deep .uni-list-item__container {
		padding: 3px 0 !important;
		/* 减小上下内边距 */
		min-height: 10px !important;
		/* 减小最小高度 */
	}

	.panel {
		background: #fbffe2;
		border-radius: 16rpx;
		// box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
	}

	/* 调大备注输入框 */
	.header-remark textarea.input-text {
		height: 80px;
		/* 增加高度 */
		width: 95%;
		/* 增加宽度 */
		font-size: 25px;
		/* 调大字体 */
		border: 1px solid #ddd;
		/* 可选：增加边框 */
		border-radius: 8px;
		/* 可选：圆角 */
	}

	/* 全选框容器（仅保留上方间距） */
	.allCheck {
		margin: 60px 0 10px 20px;
		/* 上 右 下 左 */
		padding-bottom: 0;
		/* 移除底部内边距 */
		display: flex;
		align-items: center;
	}

	checkbox {
		transform: scale(1.3);
		/* 放大复选框 */
	}


	/* 减小面板内容间距 */
	.panel_content {
		// padding: 0 10px !important; // 移除上下内边距
		margin: 0 !important; // 移除默认外边距
	}

	/* 调整标题样式 */
	.panel_content_row_item_title {
		font-size: 17px !important;
		/* 调大字体 */
		color: #000000 !important;
		/* 纯黑字体 */
		flex-shrink: 0;
		/* 防止压缩 */
	}

	/* 调整标题样式 */
	.panel_content_row_item_value {
		flex: 1;
		font-size: 17px !important;
		/* 数值特别放大 */
		color: #333 !important;
	}

	/* 调整输入框容器 */
	.panel_content_row_item_value_input {
		height: 30px;
		flex: 1;
		/* 占据剩余空间 */
		margin-left: 10px;
		/* 增加左右间距 */
	}

	.panel_content_row_item_value_input input {
		height: 29px !important;
		/* 调高输入框 */
		font-size: 20px !important;
		/* 同步调大输入文字 */
		// padding: 1px 12px !important;
		// border: 1px solid #ddd;     /* 增加边框更清晰 */
		border-radius: 4px;
	}

	// 底部按钮
	.footerPanelgx {
		height: 90px;

		.footerPanelgx_body {
			display: flex;
			justify-content: center;
			gap: 20px;
			padding: 0 20px;

			.footerBtngx {
				height: 55px;
				margin: 0 5px;
				display: flex;
				line-height: 1;
				font-size: 16px;
				border-radius: 4px;
				align-items: center;
				justify-content: center;
				box-shadow: 0 0 5px rgba(201, 201, 201, 0.5);
				color: #fff;

				&.save {
					background-color: $uni-color-success;
					width: 150px;
					flex-shrink: 0;
				}
			}

			.btn_icon {
				margin-right: 8px;
			}
		}
	}
</style>
